<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <el-avatar :size="100" :src="user.avatar" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.name }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-phone" />手机号码
                <div class="pull-right">{{ user.phone }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-s-claim" />用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-s-custom" />所属角色
                <div class="pull-right">
                  <template v-for="(item) in user.list">
                    {{ item.name }}
                  </template>
                </div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-s-data" />创建日期
                <div class="pull-right">{{ user.createTime | dateFormat }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <el-form ref="userinfo" :model="user" :rules="rules" label-width="80px">
                <el-form-item label="用户名称" prop="name">
                  <el-input v-model="user.name" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="user.phone" maxlength="11" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="user.email" maxlength="50" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="user.sex" placeholder="请选择">
                    <template v-for="(item,index) in dict['sys_user_sex']">
                      <el-option :key="index" :value="item.value" :label="item.label" />
                    </template>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="submit">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <el-form ref="resetPwd" :model="user" :rules="pwdRules" label-width="80px">
                <el-form-item label="旧密码" prop="oldPassword">
                  <el-input v-model="user.oldPassword" placeholder="请输入新密码" type="password" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="submit">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { info, updateInfo, updatePassword } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
  name: 'Profile',
  components: {},
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: 'userinfo',
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '昵称不能为空' }
        ]
      },
      pwdRules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'dict'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      info(this.$store.getters.id).then(response => {
        this.user = response.data
      })
    },
    submit() {
      this.$refs[this.activeTab].validate(valid => {
        if (valid) {
          if (this.activeTab === 'userinfo') {
            updateInfo(this.user).then(() => {
              this.$notify({
                title: '修改信息完成',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            updatePassword(this.user).then(() => {
              this.$notify({
                title: '修改密码成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
      })
    }
  }
}
</script>
<style>
.list-group-striped>.list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
}
.pull-right{
  float: right
}
</style>
